<template>
    <div>
        <h2 class="header_title">组织管理<span @click="create(1)">创建</span></h2>
        <div class="_main">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="城市" v-if="roleid == 1001 || roleid == 1002">
                    <el-input v-model="form.cityname" size="small" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="地区" v-if="roleid == 1001 || roleid == 1002 || roleid == 1003">
                    <el-input v-model="form.county" size="small" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="组织名称">
                    <el-input v-model="form.organizationname" size="small" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="_confirmbtn" size="small" @click="search">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <span class="_exports" @click="exports">导出</span>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <div class="_cabin">
                <table>
                    <thead>
                        <tr>
                            <th v-for="(v,i) in headlist" :key='i'>{{v}}</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(v,i) in page.list" :key='i'>
                            <td>{{ v.cityname }}</td>
                            <td>{{ v.county }}</td>
                            <td>{{ v.superiororganization }}</td>
                            <td>{{ v.organizationname }}</td>
                            <td>{{ v.username }}</td>
                            <td>{{ v.position }}</td>
                            <td>{{ v.phone }}</td>
                            <td>{{ v.personincharge == 1 ? '组织负责人' :  v.personincharge == 2 ? '普通人员' : '' }}</td>
                            <td class="detail">
                                <el-button type="text" @click="create(0, v)">编辑</el-button>
                                <el-button type="text" @click="del({ row: v, type: 1 })">删除</el-button>
                            </td>
                        </tr>
                        <tr v-if="!page.list || page.list && page.list.length == 0">
                            <td colspan="9" class="table_list_empty">暂无数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <pagination ref="pagination" :page="page" @pagination="search"></pagination>
        </div>
    </div>
</template>

<script>
import { Notification, MessageBox } from 'element-ui'
import store from '@/store'
import axios from 'axios'

export default {
    name: 'organizationAdministration',
    data () {
        return {
            form: {},
            page: {
                total: 0,
                list: [],
                query: {
                    pagesize: 5,
                    pagecurrent: 1                    
                }
            },
            headlist: ['城市', '区县', '上级组织', '组织名称', '负责人', '职位', '负责人电话', '管理权限'],
            currentPage: 1,
            roleid: 1001
        }
    },
    mounted() {
        this.search()
    },
    methods: {
        create(index, item) {
            this.$router.push({
                name: 'Organization',
                params: {
                    rtype: index,
                    userid: index == 0 ? item.userid : store.state.user.userid
                }
            })
        },
        search() {
            this.$http('user/getmanage', { ...this.form, ...this.page.query }).then(({ data, code, message }) => {
                if (code == 200) {
                    this.page.total = data.user.total
                    this.page.list = data.user.records
                    this.roleid = data.roleid
                } else {
                    this.page.total = 0
                    this.page.list = []
                }
            })
        },
        del({ row, type }) {
            MessageBox.confirm('你确定要删除这个组织吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    customClass: 'custom',
                    closeOnClickModal: false // 禁止点击关闭遮罩
                }).then(() => {
                    this.$http('user/delete', { userid: row.userid }).then(({ code, message }) => {
                        if (code == 200) {
                            this.$notify.success(message)
                            this.search()
                        } else {
                            this.$notify.success(message)
                        }
                    })
                }).catch(() => {})
        },
        exports() {
            location.href = 'http://wcxt.bjyulinkeji.com/user/dataexport?userid=' + store.state.user.userid
            // return axios({
            //     url: 'user/dataexport',
            //     baseURL: 'http://wcxt.bjyulinkeji.com',
            //     method: 'get',
            //     responseType: 'blob',
            //     data: { messagetoken: localStorage.token },
            // })
            //     .then(res => {
            //         console.log('res------res: ', res)
            //     const blob = new Blob([res.data], {
            //         type: 'application/x-download' // 'application/x-download' // 'application/octet-stream'
            //     })
            //     if (navigator.msSaveBlob) {
            //         try {
            //             // navigator.msSaveBlob(blob, fileName)
            //             navigator.msSaveOrOpenBlob(blob, '组织管理.xlsx')
            //         } catch (e) {
            //             console.log(e)
            //         }
            //     } else {
            //         try {
            //             var link = document.createElement('a')
            //             link.href = URL.createObjectURL(blob)
            //             link.download = '组织管理.xlsx'
            //             link.click()
            //         } catch (e) {
            //             console.log(e)
            //         }
            //     }
            //     })
            //     .catch(e => {
            //         dialog.warning('下载失败')
            //     })
        }
    }
}
</script>

<style lang="less" scoped>
    /deep/ .el-input__inner{
        background-color: transparent;
        font-size: 13px;
        color: #fff;
    }
    ._cabin {
        margin-bottom: 30px;
    }
    /deep/ .el-form-item{
        margin-bottom: 10px;
    }
</style>
